<!DOCTYPE html>
<html>
<head>
    <title>Parallel Plate Capacitor with Two Dielectrics</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="capacitorCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper function to draw an arrow ---
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 8) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.stroke(); // Draw the line part first
            
            // Draw the arrowhead
            ctx.beginPath();
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.closePath();
            ctx.fill(); // Fill the arrowhead
        }
        
        // --- Drawing parameters ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // Use a handwritten-style font if available
        // The font stack tries 'Purisa', then 'Comic Sans MS', then a generic 'cursive'
        const mainFontSize = 24;
        const subFontSize = 16;
        const fontStack = `Purisa, "Comic Sans MS", cursive`;
        
        // --- Coordinates ---
        const vWireX = 120;
        const capPlateStartX = 200;
        const capPlateEndX = 500;
        
        const yTop = 110;
        const yMid = 190;
        const yBot = 270;

        const yBattCenter = (yTop + yBot) / 2; // 190
        const yBattPos = yBattCenter - 15; // 175
        const yBattNeg = yBattCenter + 15; // 205
        
        // --- Draw the circuit ---

        // 1. Draw Wires and Battery
        ctx.beginPath();
        // Top horizontal wire
        ctx.moveTo(capPlateStartX, yTop);
        ctx.lineTo(vWireX, yTop);
        // Left vertical wire (in two parts)
        ctx.moveTo(vWireX, yTop);
        ctx.lineTo(vWireX, yBattPos);
        ctx.moveTo(vWireX, yBattNeg);
        ctx.lineTo(vWireX, yBot);
        // Bottom horizontal wire
        ctx.moveTo(vWireX, yBot);
        ctx.lineTo(capPlateStartX, yBot);
        ctx.stroke();

        // Battery Symbol
        ctx.beginPath();
        ctx.moveTo(vWireX - 10, yBattPos); // Positive terminal (short)
        ctx.lineTo(vWireX + 10, yBattPos);
        ctx.moveTo(vWireX - 25, yBattNeg); // Negative terminal (long)
        ctx.lineTo(vWireX + 25, yBattNeg);
        ctx.stroke();

        // Voltage Label
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.textAlign = 'center';
        ctx.fillText('V', vWireX - 50, yBattCenter + 8);

        // 2. Draw Capacitor Plates
        ctx.beginPath();
        ctx.moveTo(capPlateStartX, yTop);
        ctx.lineTo(capPlateEndX, yTop); // Top plate
        ctx.moveTo(capPlateStartX, yMid);
        ctx.lineTo(capPlateEndX, yMid); // Middle plate
        ctx.moveTo(capPlateStartX, yBot);
        ctx.lineTo(capPlateEndX, yBot); // Bottom plate
        ctx.stroke();

        // --- Draw Labels and Annotations ---
        ctx.textAlign = 'left';

        // Labels for materials (ε, σ)
        const labelX = capPlateStartX + 20;
        const y1Mid = (yTop + yMid) / 2;
        const y2Mid = (yMid + yBot) / 2;
        
        // ε₁, σ₁
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('ε', labelX, y1Mid + 8);
        ctx.fillText(',', labelX + 30, y1Mid + 8);
        ctx.fillText('σ', labelX + 45, y1Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('1', labelX + 13, y1Mid + 14);
        ctx.fillText('1', labelX + 58, y1Mid + 14);

        // ε₂, σ₂
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('ε', labelX, y2Mid + 8);
        ctx.fillText(',', labelX + 30, y2Mid + 8);
        ctx.fillText('σ', labelX + 45, y2Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('2', labelX + 13, y2Mid + 14);
        ctx.fillText('2', labelX + 58, y2Mid + 14);

        // Labels for Electric Fields (E₁, E₂)
        const eFieldLabelX = labelX + 110;
        
        // E₁
        drawArrow(ctx, eFieldLabelX, y1Mid, eFieldLabelX + 40, y1Mid);
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('E', eFieldLabelX + 55, y1Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('1', eFieldLabelX + 68, y1Mid + 14);

        // E₂
        drawArrow(ctx, eFieldLabelX, y2Mid, eFieldLabelX + 40, y2Mid);
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('E', eFieldLabelX + 55, y2Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('2', eFieldLabelX + 68, y2Mid + 14);

        // Downward arrows
        const downArrowX1 = capPlateEndX - 80;
        const downArrowX2 = capPlateEndX - 50;
        drawArrow(ctx, downArrowX1, yTop, downArrowX1, yTop + 30);
        drawArrow(ctx, downArrowX1, yMid, downArrowX1, yMid + 30);
        drawArrow(ctx, downArrowX2, yMid, downArrowX2, yMid + 30);
        
        // Label 'n'
        ctx.font = `${mainFontSize-2}px ${fontStack}`;
        ctx.fillText('n', downArrowX2 + 10, yMid + 25);
        
        // Thickness indicators (d₁, d₂)
        const dLineX = capPlateEndX + 20;
        ctx.beginPath();
        // d₁ line
        ctx.moveTo(dLineX, yTop);
        ctx.lineTo(dLineX, yMid);
        ctx.moveTo(dLineX - 5, yTop);
        ctx.lineTo(dLineX + 5, yTop);
        ctx.moveTo(dLineX - 5, yMid);
        ctx.lineTo(dLineX + 5, yMid);
        // d₂ line
        ctx.moveTo(dLineX, yMid);
        ctx.lineTo(dLineX, yBot);
        ctx.moveTo(dLineX - 5, yBot);
        ctx.lineTo(dLineX + 5, yBot);
        ctx.stroke();

        // d₁, d₂ labels
        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('d', dLineX + 15, y1Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('1', dLineX + 28, y1Mid + 14);

        ctx.font = `${mainFontSize}px ${fontStack}`;
        ctx.fillText('d', dLineX + 15, y2Mid + 8);
        ctx.font = `${subFontSize}px ${fontStack}`;
        ctx.fillText('2', dLineX + 28, y2Mid + 14);

        // Figure Caption
        ctx.font = `bold ${mainFontSize-4}px sans-serif`;
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.21', canvas.width / 2, yBot + 80);
    </script>
</body>
</html>